---
title: Erste Schritte
description: Anleitungen, Ressourcen und API-Referenzen, die dir helfen, mit Astro zu bauen – dem Web-Framework für inhaltsgesteuerte Websites.
i18nReady: true
tableOfContents: false
editUrl: false
next: false
hero:
  title: Astro Dokumentation
  tagline: Guides, Ressourcen und API-Referenzen, um mit Astro zu arbeiten.
  actions:
    - text: Installiere Astro
      icon: rocket
      link: /de/install-and-setup/
    - text: Lerne mehr über Astro
      icon: right-arrow
      variant: minimal
      link: /de/concepts/why-astro/
  facepile:
    tagline: Angetrieben durch Astro und unsere Open-Source-Mitwirkenden.
    linkText: Tritt uns bei!
    link: /de/contribute/
---

import { CardGrid } from '@astrojs/starlight/components'
import Card from '~/components/Landing/Card.astro'
import ListCard from '~/components/Landing/ListCard.astro'
import SplitCard from '~/components/Landing/SplitCard.astro'
import Discord from '~/components/Landing/Discord.astro'

<CardGrid>
  <Card title="Was wirst du mit Astro erschaffen?" icon="laptop">
    Entdecke [Astros vorgefertigte Themes](https://astro.build/themes/) für Blogs, Portfolios, Dokumentationen, Marketing-Seiten, Webshops und mehr!
  </Card>

  <Card title="Nimm an einer geführten Tour teil" icon="star">
    Schließe unser einleitendes [„Erstelle einen Blog“](/de/tutorial/0-introduction/)-Tutorial ab, um die Grundlagen zu lernen und deine erste Astro-Seite zu erstellen.
  </Card>

  <SplitCard title="Starte ein neues Projekt" icon="rocket">
    ```sh
    # Erstelle ein neues Projekt mit npm
    npm create astro@latest
    ```
    
    Unser [Installations-Guide](/de/install-and-setup/) bietet Schritt-für-Schritt-Anleitungen, um Astro mithilfe unseres CLI Wizards zu installieren, ein neues Projekt aus einem bestehenden Astro GitHub-Repository zu erstellen und Astro manuell zu installieren.
  </SplitCard>

  <ListCard title="Lerne" icon="open-book">
    - [Astros Hauptmerkmale](/de/concepts/why-astro/)
    - [Islands-Architektur](/de/concepts/islands/)
    - [Astro-Komponenten](/de/basics/astro-components/)
    - [Die Astro Vorlagen-Syntax](/de/reference/astro-syntax/)
  </ListCard>

  <ListCard title="Erweitere" icon="puzzle">
    - [Nutze Integrationen, wie React und Tailwind](/de/guides/integrations-guide/)
    - [Erstelle typsichere Content-Collections](/de/guides/content-collections/)
    - [Verbessere die Navigation mit Ansichtsübergängen](/de/guides/view-transitions/)
    - [Verbinde ein Headless CMS mit deinem Projekt](/de/guides/cms/)
  </ListCard>
</CardGrid>

<Discord title="Du hast eine Frage oder möchtest dich engagieren?" cta="Tritt unserem Discord bei" />
